<template>
  <!-- 费用分配 -->
  <view class="costs-assign">
    <!-- <div class="add-btn" @click="$u.route({ url: '/pages/marketCosts/market/addCosts' })">
      <div class="btn-text">
        <u-icon size="40" name="plus" color="#fff"></u-icon>
        <div>新增费用</div>
      </div>
    </div> -->

    <template v-if="List && List.length > 0">
      <div :class="['costs-assign-item orange']" v-for="item in List" :key="item.Id">
        <div class="del-btn" v-if="showActions(item)" @tap="handleDeleteClick(item)">
          <u-icon size="26" name="close" :bold="true" color="#fff"></u-icon>
        </div>
        <div class="costs-assign-item-title">
          <div class="title nowrap">
            <span class="line"></span>
            {{ item.CompanyName }}
          </div>
          <div class="timer nowrap">{{ item.Year }}年{{ quarters[item.QuarterId - 1] }}</div>
        </div>
        <div class="costs-assign-item-con">
          <div class="row-item">
            <div class="u-flex">
              <div class="label-name">本季度金额：</div>
              <div class="price">￥{{ item.TotalCost }}</div>
            </div>
            <!-- <div class="edit-text" @tap="toUpdatePage(item)">修改费用></div> -->
          </div>
          <div class="row-item">
            <div class="u-flex">
              <div class="label-name">费用总金额：</div>
              <div class="price">￥{{ item.ToCost }}</div>
            </div>
          </div>
          <div class="row-item">
            <div class="u-flex">
              <div class="label-name">剩余金额：</div>
              <div class="price">￥{{ getBalanceMoney(item) }}</div>
            </div>
          </div>
          <div class="btn-group u-m-t-20 u-text-right">
            <u-button
              class=" u-m-l-10 u-m-t-10"
              type="warning"
              size="medium"
              :custom-style="btnStyle"
              shape="circle"
              plain
              @click="$u.route({ url: '/pages/marketCosts/market/detail', params: { Id: item.Id } })"
            >
              详情
            </u-button>
            <!-- 详情是分配页面，数据不能修改 -->

            <template v-if="showActions(item)">
              <u-button
                class=" u-m-l-10 u-m-t-10"
                type="warning"
                size="medium"
                :custom-style="btnStyle"
                shape="circle"
                @click="toCategoryPage(item)"
              >
                分类设置
              </u-button>
              <u-button
                class=" u-m-l-10 u-m-t-10"
                type="warning"
                size="medium"
                :custom-style="btnStyle"
                shape="circle"
                @click="toAssignPage(item)"
              >
                费用分配
              </u-button>
              <u-button
                class=" u-m-l-10 u-m-t-10"
                type="warning"
                size="medium"
                :custom-style="btnStyle"
                shape="circle"
                @tap="onCostsChangeClick(item)"
              >
                调整费用
              </u-button>
              <!-- 
              <u-button
                class=" u-m-l-20 u-m-t-10"
                type="warning"
                size="medium"
                :custom-style="btnStyle"
                shape="circle"
                @tap="handleDeleteClick(item)"
              >
                删除
              </u-button> -->
            </template>
          </div>
        </div>
      </div>
    </template>
    <u-empty v-else text="暂无数据" mode="list"></u-empty>

    <u-button type="warning" long @click="$u.route({ url: '/pages/marketCosts/market/addCosts' })">新增费用</u-button>

    <!-- <u-loadmore :status="status" /> -->
    <u-modal
      ref="changeModalRef"
      v-model="showChangeModal"
      :show-cancel-button="true"
      :show-title="false"
      :async-close="true"
      confirm-text="确认提交"
      confirm-color="#ff8441"
      width="700rpx"
      @confirm="handleCostsChange"
    >
      <view class="slot-content u-p-l-40 u-p-r-40">
        <u-form class="form" :model="{}" :label-width="150">
          <u-form-item label="金额">
            <u-radio-group v-model="updateInfo.ChangeType">
              <u-radio v-model="item.checked" v-for="(item, index) in UpdateTypeList" :key="index" :name="item.value">
                {{ item.label }}
              </u-radio>
            </u-radio-group>
            <u-input type="number" placeholder="金额" v-model="updateInfo.Number" :border="true"></u-input>
          </u-form-item>
          <u-form-item label="备注信息">
            <u-input v-model="updateInfo.Remark" type="textarea" :border="true"></u-input>
          </u-form-item>
        </u-form>
      </view>
    </u-modal>

    <u-modal
      v-model="showConfirm"
      ref="confirmRef"
      :async-close="true"
      :show-title="false"
      content="是否确认删除"
      :show-cancel-button="true"
      @confirm="handleDelete"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShowBtn: false,
      showChangeModal: false,

      btnStyle: {
        height: '50rpx',
        color: '#ffffff',
        padding: '0 30rpx'
      },

      IsFirst: true,
      Page: {
        Items: [],
        PageCount: 0,
        PageIndex: 0,
        PageSize: 10,
        TotalCount: 0
      },
      List: [],

      searchParams: {
        Year: '',
        QuarterId: '',
        CompanyId: ''
      },
      status: 'loadmore',

      quarters: ['第一季度', '第二季度', '第三季度', '第四季度'],
      UpdateTypeList: [{ label: '新增', value: 1, checked: false }, { label: '减少', value: 2, checked: false }],

      showConfirm: false,

      currentId: '',

      updateInfo: {
        Id: '',
        ChangeType: '',
        Number: '',
        Remark: ''
      }
    };
  },

  // 触底事件
  onReachBottom() {
    if (this.Page.PageIndex + 1 >= this.Page.PageCount) return;
    this.status = 'loading';
    this.Page.PageIndex = this.Page.PageIndex + 1;
    this.getData();
  },

  onLoad() {
    this.getData(true);
  },

  methods: {
    getBalanceMoney(item) {
      return Number(item.ToCost) - Number(item.BDRCost) + (Number(item.BDRCost) - Number(item.CheckCost));
    },

    // 当前年 并且 当前季度才显示的操作
    showActions(item) {
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth();
      let quarter = parseInt((month + 3) / 3);

      return year == item.Year && quarter == item.QuarterId;
    },

    toAssignPage(item) {
      this.$u.route({
        url: '/pages/marketCosts/market/costsAssign',
        params: {
          Id: item.Id
        }
      });
    },

    onCostsChangeClick(item) {
      this.updateInfo.Id = item.Id;
      this.updateInfo.ChangeType = '';
      this.updateInfo.Number = '';
      this.updateInfo.Remark = '';

      this.showChangeModal = true;
    },

    handleCostsChange() {
      this.$u.api
        .updateMarketCosts(this.updateInfo)
        .then(res => {
          const { ResultCode, ResultMessage } = res;

          if (ResultCode == 1) {
            this.showChangeModal = false;
            this.$u.toast(ResultMessage);
            this.getData(true);
          } else {
            this.$u.toast(ResultMessage);
          }
        })
        .catch(err => {
          this.$refs.changeModalRef.clearLoading();
        });
    },

    toCategoryPage(item) {
      this.$u.route({
        url: '/pages/marketCosts/market/category',
        params: {
          Id: item.Id
        }
      });
    },

    toUpdatePage(item) {
      this.$u.route({
        url: '/pages/marketCosts/market/updateCosts',
        params: {
          CompanyName: item.CompanyName,
          QuarterId: item.QuarterId,
          Id: item.Id,
          Year: item.Year,
          IsPercentage: item.IsPercentage
        }
      });
    },

    handleDeleteClick(item) {
      this.showConfirm = true;
      this.currentId = item.Id;
    },

    handleDelete() {
      this.$u.api
        .deleteMarketCosts({ Id: this.currentId })
        .then(res => {
          const { ResultCode, ResultMessage } = res;

          if (ResultCode == 1) {
            this.$u.toast(ResultMessage);
            this.getData(true);
          }
        })
        .catch(() => {
          this.$refs.confirmRef.clearLoading();
        });
    },

    getData(reload) {
      this.$u.api
        .getMarketCostsSetPageList({
          ...this.searchParams,
          ...{
            Pageindex: this.Page.PageIndex,
            Pagesize: this.Page.PageSize
          }
        })
        .then(res => {
          const { MarketMoney_Set_List: PageList, ResultCode, ResultMessage } = res;

          if (ResultCode == 1) {
            if (PageList) {
              this.Page = PageList;
              if (reload) {
                this.List = PageList.Items;
              } else {
                this.List.push(...PageList.Items);
              }

              if (this.Page.PageIndex + 1 >= this.Page.PageCount) {
                this.status = 'nomore';
              }
            } else {
              this.List = [];
              this.status = 'nomore';
            }
          } else {
            this.$u.toast(ResultMessage);
          }
        });
    }
  }
};
</script>

<style lang="scss">
.costs-assign {
  width: 750rpx;
  padding: 20rpx 20rpx;
  .costs-assign-item {
    border-top: 6rpx solid #ff8441;
    position: relative;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
    border-radius: 16rpx;
    margin-bottom: 28rpx;
    .del-btn {
      position: absolute;
      right: 0;
      top: -6rpx;
      font-weight: bold;
      background: #f4570e;
      width: 60rpx;
      text-align: center;
      height: 44rpx;
      line-height: 44rpx;
      border-radius: 0 16rpx 0 16rpx;
    }
    .costs-assign-item-title {
      padding-top: 30rpx;
      padding-bottom: 10rpx;
      border-radius: 16rpx 16rpx 0 0;
      line-height: 50rpx;
      font-size: 30rpx;
      border-bottom: 1rpx dashed #b9b9b9;
      .title {
        display: flex;
        align-items: center;
        flex: 2;
        font-size: 36rpx;
        font-weight: bold;
        .line {
          display: inline-block;
          height: 36rpx;
          width: 6rpx;
          margin-right: 20rpx;
          background: #ff8441;
        }
      }
      .timer {
        margin-left: 26rpx;
        flex: 1;
        color: #666;
        font-size: 28rpx;
      }
    }
    .costs-assign-item-con {
      font-size: 30rpx;
      padding: 0 20rpx 28rpx 20rpx;
      .row-item {
        display: flex;
        margin-top: 16rpx;
        justify-content: space-between;
        .label-name {
          color: #979797;
          width: 200rpx;
        }
        .edit-text {
          color: #ff7626;
          margin-left: 40rpx;
        }
      }
      hr {
        margin: 28rpx 0;
        border: 1rpx dashed #b9b9b9;
      }
    }
    .btn-group {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .btn-wrap {
      margin-top: 20rpx;
      display: flex;
      justify-content: flex-end;
      // display: grid;
      // grid-template-columns: repeat(4, 1fr);
      // grid-column-gap: 16rpx;

      .btn-item {
        flex: 1;
        border-radius: 6rpx;
        padding: 10rpx 0;
        text-align: center;
        margin-left: 16rpx;
        max-width: calc(100vw / 4 - 30rpx);
      }
      .btn-item:nth-child(1) {
        margin-left: 0;
      }
      .info-btn,
      .set-btn,
      .adjust-btn {
        border: 1px solid #ff7626;
        color: #ff7626;
      }
      .cost-btn {
        background: linear-gradient(301.09deg, #f29e40 6.64%, #f7b66e 91.7%);
        color: #fff;
      }
    }
  }
  .add-btn {
    position: fixed;
    bottom: 200rpx;
    right: 10rpx;
    border-radius: 50%;
    width: 140rpx;
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    // box-shadow: 2px 4px 12px 2px rgba(47, 128, 237, 0.2);
    box-shadow: 0px 6px 12px rgba(245, 143, 39, 0.3);
    // background: linear-gradient(301.09deg, #f9d2a7 6.64%, #f4860a 91.7%);
    background: linear-gradient(301.09deg, #f4860a 6.64%, #f9d2a7 91.7%);
    .btn-text {
      color: #fff;
      font-size: 24rpx;
      text-align: center;
    }
  }
}

.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
